<template>
    <context-menu-table
        :data="data"
        :menuItems="contextMenuItems"
        :handleCtxMenu="addNewRow">
        <slot></slot>
    </context-menu-table>
</template>
<script>
import contextMenuTable from '@/components/ContextMenuTable'
export default {
    name: 'rowAddableTable',
    components: {
        contextMenuTable
    },
    data() {
        return {
            contextMenuItems: [
                {
                    index: 1,
                    value: '上方添加一行'
                },
                {
                    index: 2,
                    value: '下方添加一行'
                }
            ]
        }
    },
    props: {
        data: {
            type: [Array, Object],
            required: true
        },
        proto: {
            type: Object,
            required: true
        }
    },
    methods: {
        addNewRow(row, event, index) {
            if (row.index === 1) {
                // up
                this.data.splice(index, 0, this.proto)
            } else {
                // down
                this.data.splice(index + 1, 0, this.proto)
            }
        }
    }
}
</script>
<style>

</style>
